<template>
  <div style="margin-top: 10px" class="app-contain">
      <el-row>
        <el-col v-for="course in tableData" :key="course.courseId" :span="6">
          <el-card :body-style="{ padding: '1px' }"  style="width: 300px; height: 500px">
            <img :src="course.courseCover" class="image" style="width: 100%;height: 250px; cursor: pointer;" @click="playVideo(course)" />
            <div style="padding: 20px">
              <h4>标题：{{ course.courseTitle }}</h4>
              <h4>学科：{{ course.subjectName }}({{course.levelName  }})</h4>
              <p>视频介绍：{{ course.courseIntroduction }}</p>
              <el-button text @click="playVideo(course)" class="button">课程视频</el-button>
              <el-button text @click="previewMaterials(course)" class="button">课程资料下载</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

</template>

<script>
import { mapState } from 'vuex'
import courseApi from '@/api/course'

export default {
  // components: { Pagination },
  data () {
    return {
      queryParam: {
        paperType: 1,
        subjectId: 0,
        pageIndex: 1,
        pageSize: 10
      },
      tabId: '',
      listLoading: true,
      subjectList: [],
      tableData: [],
      total: 0
    }
  },
  created () {
    this.initCourse()
  },
  methods: {
    initCourse () {
      let _this = this
      courseApi.List().then(re => {
        _this.courseList = re.response
        let courseId = _this.courseList[0].courseId
        _this.queryParam.courseId = courseId
        _this.tabId = courseId.toString()
        _this.search()
      })
    },
    search () {
      this.listLoading = true
      courseApi.List(this.queryParam).then(response => {
        const responseData = response.response
        this.tableData = responseData
        this.queryParam.pageIndex = responseData.tableData.pageIndex
        this.queryParam.pageSize = responseData.tableData.pageSize
        this.total = responseData.tableData.total
      })
        .finally(() => {
          this.listLoading = false
        })
    },
    playVideo (course) {
      // 播放视频的逻辑
      console.log('播放视频:', course.courseVideo)
      // 在这里添加您的跳转逻辑，将用户导航至视频链接
      window.location.href = course.courseVideo
    },
    previewMaterials (course) {
      // 预览资料的逻辑
      console.log('预览资料:', course)
      // 在这里添加您的跳转逻辑，将用户导航至资料链接
      window.location.href = course.courseInformation
    },
    paperTypeChange (val) {
      this.search()
    },
    // subjectFormatter  (row, column, cellValue, index) {
    //   return this.subjectEnumFormat(cellValue)
    // },
    subjectFormatter (row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue)
    },
    subjectChange (tab, event) {
      this.queryParam.subjectId = Number(this.tabId)
      this.search()
    }
  },
  computed: {
    ...mapState('enumItem', {
      paperTypeEnum: state => state.exam.examPaper.paperTypeEnum
    })
  }
}
</script>
